<template>
  <div class="app-page-background">
    基本页面

    <!-- Simple video example -->
    <video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" autoplay poster="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F2168b07cddf62772edabaf5e76fe3bd33e2c3f2e9038-08R1mZ_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651916605&t=5ddbedf37ec10d4b130f9a95edd5c858">
      抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以 <a href="videofile.ogg">下载</a>
      并用你喜欢的播放器观看！
    </video>
    <!-- :snapshot-at-duration-percent="1" -->
    <div class=" flex-start-baseline">
      <!-- show-play-button -->
      <div style="padding-right:30px">
        <VueVideoThumbnail
          video-src="https://vodzz.duoduocdn.com/4a8d9c67vodtransgzp1251542705/6749b4eb387702298788357819/v.f100820.mp4"
          :width="200"
          :height="356"
          :snapshot-at-duration-percent="0.1"
          :chunks-quantity="10"
          @snapshotCreated="snapshotCreated"
          @snapshotsArrayCreated="snapshotsArrayCreated"
        >
          <template #snapshot="{snapshot}">
            <img
              v-if="snapshot"
              :src="snapshot"
              alt="snapshot"
            >
          </template>
        </VueVideoThumbnail>
      </div>
      <video src="https://vodzz.duoduocdn.com/4a8d9c67vodtransgzp1251542705/6749b4eb387702298788357819/v.f100820.mp4" width="200" controls="controls">
        您的浏览器不支持 video 标签。
      </video>
    </div>
  </div>
</template>

<script>
import VueVideoThumbnail from 'vue-video-thumbnail'
import variables from '@/styles/variables.scss'
export default {
  name: 'Dashboard',
  components: { VueVideoThumbnail },
  data () {
    return {}
  },
  mounted () {
    console.log(variables)
    // this.getData()
    // thumb.video('https://vodzz.duoduocdn.com/4a8d9c67vodtransgzp1251542705/6749b4eb387702298788357819/v.f100820.mp4', null,
    //   { width: 200, silent: true })
    //   .then(() => {
    //     console.log('Done!')
    //   }).catch(err => {
    //     console.log(err)
    //   })
  },
  methods: {
    snapshotCreated (e) {
      console.log(e)
      console.log('snapshotCreated')
    },
    snapshotsArrayCreated () {
      console.log('snapshotsArrayCreated')
    },
    // 获取数据
    async getData () {
      const res = await this.$axios({
        url: '/api/user',
      })
      if (res.status === 200) {
        this.data = res.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
